<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>
<script>
    //获取元素
    var canvas = document.getElementById('canvas')

    //设置画布大小
    canvas.width = 1200
    canvas.height = 1200

    //创建绘画的工作台
    var ctx = canvas.getContext('2d')

   //绘画开始 和 绘画结束
   //    stroke 只要是有这个名字 都是跟线有关系
   // fill  只要跟这个名字有关系 都是填充
   ctx.beginPath()
    ctx.strokeStyle = 'red'; //线的颜色
    ctx.lineWidth = 10; //线的粗细
    ctx.lineCap = 'round'; //线头
    ctx.lineJoin = 'round'; //线与线的交点

    ctx.fillStyle = 'blue';

    ctx.moveTo(100,100); //起点
    ctx.lineTo(300,100); //终点
    ctx.lineTo(300, 300);
    ctx.lineTo(100, 300);
    ctx.lineTo(100, 100);

    
    ctx.stroke()  //连线
    ctx.fill() //填充
   ctx.closePath()

    //画边的矩形
   ctx.strokeStyle = 'yellow'
   ctx.strokeRect(400, 300, 200, 200)

    //填充的矩形
   ctx.fillStyle = 'black'
   ctx.fillRect(200,200, 100,100)

   ctx.beginPath()
    ctx.strokeStyle = '#000';
    ctx.fillStyle = 'red';
    //画圆形 Math.PI = 180度 2PI = 360度 一圈
    ctx.arc(400,400, 50, 0, Math.PI*2);
    ctx.stroke()
    ctx.fill()
   ctx.closePath()

   ctx.beginPath()
        ctx.font = '40px 微软雅黑';
        ctx.strokeStyle = 'green'
        ctx.lineWidth = 1

        ctx.fillStyle = 'red'

        ctx.strokeText('hello world', 500,500);
        ctx.fillText('Hello canvas', 500, 550);
   ctx.closePath()


   //创建一个图片
   var img = new Image()
   img.src = './pc2.jpg'

    //当图片加载完成时候所触发的
   img.onload = function()
   {
        //往画布上去画图片
        // ctx.drawImage(img, 起点坐标x, 起点坐标y, 指定尺寸大小w, 指定尺寸大小h)
        ctx.drawImage(img, 0, 0, 200, 200)

    var data = ctx.getImageData(0, 0, canvas.width, canvas.height)
    console.log(data)
   }
</script>